<template>
  <view class="transformer-demo">
    <view class="section-title">代码转换演示</view>

    <view class="code-section">
      <view class="section-subtitle">原始代码 (TypeScript)</view>
      <textarea class="code-display" :value="originalCode" readonly></textarea>
    </view>

    <view class="arrow">↓</view>

    <view class="code-section">
      <view class="section-subtitle">转换后代码 ({{ currentPlatform }})</view>
      <textarea class="code-display" :value="transformedCode" readonly></textarea>
    </view>

    <view class="description">
      <text>以上示例展示了PlatformTransformer的工作原理：</text>
      <text class="desc-item">1. 在编译阶段，Babel插件会分析所有PlatformChain.with()调用</text>
      <text class="desc-item">2. 根据当前平台({{ currentPlatform }})，移除其他平台的代码</text>
      <text class="desc-item">3. 将匹配的回调函数替换整个PlatformChain调用链</text>
      <text class="desc-item">4. 最终生成的代码只包含当前平台需要的实现</text>
    </view>
  </view>
</template>

<script>
import { Platform } from 'uni-platform-chain';

export default {
  name: 'TransformerDemo',
  data() {
    return {
      currentPlatform: this.getCurrentPlatformName(),
      // 示例源代码
      originalCode:
`// 原始代码：包含所有平台的实现 (TypeScript)
interface ButtonStyle {
  color: string;
  fontSize: string;
  transition?: string;
}

function getButtonStyle(): ButtonStyle {
  return PlatformChain.with<ButtonStyle>(() => ({
    // 默认样式
    color: 'black',
    fontSize: '14px'
  }))
  .web(() => ({
    // Web平台样式
    color: 'blue',
    fontSize: '16px',
    transition: 'all 0.3s'
  }))
  .mpWeixin(() => ({
    // 微信小程序样式
    color: 'green',
    fontSize: '32rpx'
  }))
  .app(() => ({
    // App平台样式
    color: 'red',
    fontSize: '18px'
  }))
  .exe();
}`,
      // 转换后的示例代码
      transformedCode: this.getTransformedCode()
    };
  },
  methods: {
    getCurrentPlatformName() {
      const platform = Platform.getPlatform();
      const codePlatform = Platform.getCodePlatform();

      const platformMap = {
        'web': 'Web/H5平台',
        'app': 'App平台',
        'mp-weixin': '微信小程序平台',
        'mp-alipay': '支付宝小程序平台',
        'mp-baidu': '百度小程序平台',
        'mp-toutiao': '头条小程序平台',
        'mp-qq': 'QQ小程序平台',
        'mp-kuaishou': '快手小程序平台'
      };

      return platformMap[platform] || codePlatform;
    },

    getTransformedCode() {
      const platform = Platform.getPlatform();

      // 根据不同平台返回不同的转换后代码
      if (platform === 'web') {
        return `// 转换后代码：只保留Web平台实现
function getButtonStyle(): ButtonStyle {
  return (() => ({
    // Web平台样式
    color: 'blue',
    fontSize: '16px',
    transition: 'all 0.3s'
  }))();
}`;
      } else if (platform === 'mp-weixin') {
        return `// 转换后代码：只保留微信小程序平台实现
function getButtonStyle(): ButtonStyle {
  return (() => ({
    // 微信小程序样式
    color: 'green',
    fontSize: '32rpx'
  }))();
}`;
      } else if (platform === 'app') {
        return `// 转换后代码：只保留App平台实现
function getButtonStyle(): ButtonStyle {
  return (() => ({
    // App平台样式
    color: 'red',
    fontSize: '18px'
  }))();
}`;
      } else {
        return `// 转换后代码：使用默认实现
function getButtonStyle(): ButtonStyle {
  return (() => ({
    // 默认样式
    color: 'black',
    fontSize: '14px'
  }))();
}`;
      }
    }
  }
};
</script>

<style scoped>
.transformer-demo {
  padding: 30rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  margin-top: 40rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  text-align: center;
}

.section-subtitle {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #666;
}

.code-section {
  margin-bottom: 20rpx;
}

.code-display {
  width: 100%;
  height: 300rpx;
  background: #2d2d2d;
  color: #e6e6e6;
  font-family: monospace;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  line-height: 1.5;
}

.arrow {
  text-align: center;
  font-size: 40rpx;
  margin: 20rpx 0;
  color: #666;
}

.description {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  font-size: 26rpx;
  color: #666;
}

.desc-item {
  margin-left: 20rpx;
}
</style>
